import {getMenuList} from '@/api/menu'
import Layout from '@/layout/index'

const state={
    routers: []
}
const mutations ={
    SET_ROUTERS(state,data){
        state.routers=data;
    },
    RESET_ROUTERS(state){
        state.routers=[];
    }
}
const actions={
    initRouters({commit}){
        console.log("查询菜单");
        return new Promise((resolve, reject) => {
            getMenuList()
            .then((res)=>{
                const fmtRouters =formatRouters(res);
                commit("SET_ROUTERS", fmtRouters);

                resolve(fmtRouters)
            })
            .catch((err)=>{
                console.log(err);
                reject();
            })
        });
    }
}

// formatRouters()方法用于对响应过来的菜单数据(data)进行格式化
const formatRouters = (data) => {
    // data为后端响应过来的List<Menu>菜单列表数据
    const fmtRouters = [] // 定义一个空的路由对象数组
    // 对从后端响应过来的List<Menu>菜单列表数据使用forEach进行循环遍历
    data.forEach(router => {
      // 循环出的每个Menu菜单对象, 从每个菜单对象中取出个别值再赋值给router
      const { path, component, name, iconCls } = router
      let { children } = router
      if (children && children instanceof Array) {
        // 如果children存在(即当前Menu菜单对象下有子菜单对象)，并且它是Array数组类型
        // 使用递归取出当前菜单里的子菜单对象信息
        children = formatRouters(children)
      }
      // 单独对router路由对象中的属性格式化后，挨个赋值给fmtRouter对象
      const fmtRouter = {
        path: path,
        name: name,
        // iconCls: iconCls,
        meta: { icon: iconCls, title: name },
        children: children,
       // component的值在router/index.js路由文件中是一个组件对象，而在t_menu菜单表中component是字符串类型的值
       // 所以我们这里需要将这个字符串类型的值转换成具体某个组件对象，所有自定义组件将创建在views目录中
        component: component === '/Home' ? Layout : require('@/views' + component + '.vue').default
      }
      // 再将格式化好的fmtRouter路由对象添加到fmtRouters路由对象数组中
      fmtRouters.push(fmtRouter)
    })
    // 将查询到的菜单列表(路由对象数组)进行返回
    return fmtRouters
  }

  export default {
    namespaced:true,
    state,
    mutations,
    actions
  }
  